<template>
  <div id="systemOperationLogView">
    <a-form :model="searchParams" layout="inline">
      <a-form-item field="f1" label="操作名称" style="min-width: 150px">
        <a-input
          v-model="searchParams.operationName"
          placeholder="请输入操作名称"
          style="min-width: 150px"
        />
      </a-form-item>
      <a-form-item field="f2" label="表名" style="min-width: 150px">
        <a-input
          v-model="searchParams.tname"
          placeholder="请输入操作表名"
          style="min-width: 150px"
        />
      </a-form-item>
      <a-form-item field="f3" label="操作者ip" style="min-width: 150px">
        <a-input
          v-model="searchParams.operatorIp"
          placeholder="请输入操作者ip"
          style="min-width: 150px"
        />
      </a-form-item>
      <a-form-item field="f4" label="操作者客户端" style="min-width: 150px">
        <a-select
          placeholder="请选择客户端"
          allow-search
          v-model="searchParams.operatorClient"
        >
          <a-option :value="CLIENT_ENUM.PC">{{ CLIENT_ENUM.PC }}</a-option>
          <a-option :value="CLIENT_ENUM.MOBILE"
            >{{ CLIENT_ENUM.MOBILE }}
          </a-option>
          <a-option :value="CLIENT_ENUM.IPAD">{{ CLIENT_ENUM.IPAD }}</a-option>
          <a-option value="">不限</a-option>
        </a-select>
      </a-form-item>
      <a-form-item field="f5" label="创建时间" style="min-width: 150px">
        <a-range-picker
          showTime
          :time-picker-props="{
            defaultValue: ['00:00:00', '00:00:00'],
          }"
          @change="onChange"
          style="width: 380px"
        />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="doSubmit" :loading="loadingSubmit"
          >查询
        </a-button>
      </a-form-item>
    </a-form>
    <a-table
      :loading="loadingList"
      :ref="tableRef"
      :columns="columns"
      :data="dataList"
      :pagination="{
        showTotal: true,
        pageSize: searchParams.pageSize,
        current: searchParams.current,
        total,
      }"
      @page-change="onPageChange"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 }}
      </template>
      <template #operationMethod="{ rowIndex }">
        <a-space wrap>
          <a-tooltip
            :content="dataList[rowIndex].operationMethod"
            background-color="#3491FA"
          >
            <a-button type="text">查看</a-button>
          </a-tooltip>
        </a-space>
      </template>
      <template #operationParams="{ rowIndex }">
        <a-space wrap>
          <a-button type="text" @click="handleClickProcess(true, rowIndex)"
            >查看
          </a-button>
          <a-modal
            v-model:visible="visibleProcess"
            @ok="handleClickProcess(false, rIndex)"
            hide-cancel
            :mask="true"
          >
            <template #title>查看参数</template>
            <JsonEditor class="editor" v-model="jsonVal" />
          </a-modal>
        </a-space>
      </template>
      <template #operationResult="{ rowIndex }">
        <a-space wrap>
          <a-button type="text" @click="handleClickProcess2(true, rowIndex)"
            >查看
          </a-button>
          <a-modal
            v-model:visible="visibleProcess2"
            @ok="handleClickProcess2(false, rIndex2)"
            hide-cancel
            :mask="true"
          >
            <template #title>查看参数</template>
            <JsonEditor class="editor" v-model="jsonVal" />
          </a-modal>
        </a-space>
      </template>
      <template #operatorClient="{ rowIndex }">
        <a-space wrap>
          <a-tag
            color="#168cff"
            v-if="dataList[rowIndex].operatorClient === CLIENT_ENUM.PC"
            >{{ dataList[rowIndex].operatorClient }}
          </a-tag>
          <a-tag
            color="#ffb400"
            v-if="dataList[rowIndex].operatorClient === CLIENT_ENUM.MOBILE"
            >{{ dataList[rowIndex].operatorClient }}
          </a-tag>
          <a-tag
            color="#0fc6c2"
            v-if="dataList[rowIndex].operatorClient === CLIENT_ENUM.IPAD"
            >{{ dataList[rowIndex].operatorClient }}
          </a-tag>
        </a-space>
      </template>
      <template #optional="{ record }">
        <a-space>
          <a-popconfirm
            content="确定要删除吗?"
            type="warning"
            :onOk="() => doDelete(record)"
          >
            <a-button
              :loading="loadingDelete"
              status="danger"
              :disabled="record.handleState === STATE_ENUM.UN_HANDLED"
            >
              删除
            </a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watchEffect } from "vue";
import message from "@arco-design/web-vue/es/message";
import {
  deleteOperationLogByIdUsingDelete,
  getOperationLogListUsingPost,
} from "@/api/operationLogController";
import API from "@/api";
import CLIENT_ENUM from "@/common/enum/clientInfoEnum";
import STATE_ENUM from "@/common/enum/stateInfoEnum";
import JsonEditor from "json-editor-vue3/lib/json-editor.vue";
import { Message } from "@arco-design/web-vue";

/**
 * loading等状态
 */
const loadingList = ref(false);
const loadingSubmit = ref(false);
const loadingDelete = ref(false);

/**
 * 日期选择方法
 */
const onChange = (dateString: any) => {
  if (dateString) {
    searchParams.value.startTime = dateString[0];
    searchParams.value.endTime = dateString[1];
  } else {
    searchParams.value.startTime = "";
    searchParams.value.endTime = "";
  }
};

const tableRef = ref();

const dataList = ref<API.OperationLog>([]);
const total = ref(0);
const searchParams = ref({
  pageSize: 10,
  current: 1,
  startTime: "",
  endTime: "",
  operationName: "",
  operatorClient: "",
  operatorIp: "",
  tname: "",
} as API.OperationLogQueryRequest);

const loadData = async () => {
  loadingList.value = true;
  const res = await getOperationLogListUsingPost(searchParams.value);
  loadingList.value = false;
  if (res.data.code === 0) {
    dataList.value = res.data.data.records ?? [];
    total.value = res.data.data.total ?? 0;
  } else {
    message.error("加载失败，" + res.data.message);
  }
};

/**
 * 监听 searchParams 变量，改变时触发页面的重新加载
 */
watchEffect(() => {
  loadData();
});

/**
 * 页面加载时，请求数据
 */
onMounted(() => {
  loadData();
});

const columns = [
  {
    title: "序号",
    slotName: "index",
  },
  // {
  //   隐藏显示id
  //   title: "id",
  //   dataIndex: "id",
  // },
  {
    title: "操作名称",
    dataIndex: "operationName",
  },
  {
    title: "操作表名",
    dataIndex: "tname",
  },
  {
    // 浮动显示
    title: "操作方法",
    dataIndex: "operationMethod",
    slotName: "operationMethod",
  },
  {
    // json显示
    title: "操作参数",
    dataIndex: "operationParams",
    slotName: "operationParams",
  },
  {
    // json显示
    title: "操作结果",
    dataIndex: "operationResult",
    slotName: "operationResult",
  },
  {
    title: "操作者ip",
    dataIndex: "operatorIp",
  },
  {
    title: "操作者客户端",
    dataIndex: "operatorClient",
    slotName: "operatorClient",
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
  },
  {
    title: "操作",
    slotName: "optional",
  },
];

/**
 * 确认搜索，重新加载数据
 */
const doSubmit = () => {
  loadingSubmit.value = true;
  // 这里需要重置搜索页号
  searchParams.value = {
    ...searchParams.value,
    current: 1,
  };
  loadingSubmit.value = false;
};

const onPageChange = (page: number) => {
  searchParams.value = {
    ...searchParams.value,
    current: page,
  };
};

const doDelete = async (operationLog: API.OperationLog) => {
  if (!operationLog.id) {
    return;
  }
  const res = await deleteOperationLogByIdUsingDelete({ id: operationLog.id });
  if (res.data.code === 0) {
    Message.success("删除成功");
    await loadData();
  } else {
    Message.error("删除失败，" + res.data.message);
  }
};

/**
 * 对话框
 */
const jsonVal = ref({});
const visibleProcess = ref(false);
const rIndex = ref(0);
const handleClickProcess = (flag: boolean, rowIndex: number) => {
  rIndex.value = rowIndex;
  if (flag) {
    jsonVal.value = JSON.parse(
      dataList.value[rowIndex].operationParams as string
    );
  }
  visibleProcess.value = flag;
};

const visibleProcess2 = ref(false);
const rIndex2 = ref(0);
const handleClickProcess2 = (flag: boolean, rowIndex: number) => {
  rIndex.value = rowIndex;
  if (flag) {
    jsonVal.value = JSON.parse(
      dataList.value[rowIndex].operationResult as string
    );
  }
  visibleProcess2.value = flag;
};
</script>

<style scoped>
#systemOperationLogView {
  max-width: 95%;
  margin: 0 auto;
}

.arco-image-with-footer-inner .arco-image-footer {
  background: linear-gradient(
    360deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0) 0%
  ) !important;
}
</style>
